<template>
	<view class="page">
		<view class="searchPP">
			<image @click="goBackM" style="width: 0.6rem;height: 1rem;padding: 0rem 0.5rem 0rem 0rem;" src="../../../style/image/cargo/leftarow.jpg"
			 alt="">
				<view class="searchP">
					<view class="search" :style="{ width: '100%' }">
						<u-search placeholder="请输入您要搜索的网点名称或电话" shape="round" v-model="keyword" :show-action="false" @search="searchWD"></u-search>
					</view>
				</view>
		</view>
		<!-- <u-empty style="margin-top: 3rem;" v-if="showDatasList.length==0 && !isLoading" text="暂无数据" mode="data"></u-empty> -->
		<view class="showDatsC" v-for="(item,index) in showDatasList">
			<view class="" style="border-bottom: 1px solid #e8e8e8;">
				<view class="prolifyP">
					<view style="" style="display: flex;align-items: center;">
						<view class=" " @click="selectClickM(item,index)" style="margin: 5px;">
							<image v-if="item.show == false" style="width: 1rem; height: 1rem" src="../../../style/image/cargo/round.png"
							 alt="" />
							<image v-else style="width: 1rem; height: 1rem" src="../../../style/image/cargo/selectRound.png" alt="" />
						</view>
						<view class="">
							<view style="color:rgb(0, 0, 0);font-size: 0.72rem;font-family: PingFang SC;font-weight: 300;color: #666666;margin-bottom: 0.1rem;">
								{{item.branchName}}
							</view>
							<view style="font-size: 0.72rem; font-family: PingFang SC; font-weight: 300; color: #333333; width: 13rem;overflow: hidden;
									 text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;">
								{{item.address}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<uni-load-more  @clickLoadMore="clickLoadMore"  :content-text="contentText" :status="status" ></uni-load-more>
		<view class="footP">
			<view @click="sureBtnClick" style="padding: 0.7rem;display: flex;align-items: center;">
				<!-- <image style="width: 1rem;height:1rem" src="../../../style/image/cargo/add.jpg" alt=""> -->
				<view style="color: white;margin-left: 0.2rem;">确认绑定</view>
			</view>
		</view>
	</view>

</template>

<script lang='ts'>
	import {
		Component,
		Prop,
		Vue,
		Watch,
		Emit
	} from "vue-property-decorator";
	import {
		findShopBranch,
		bindStore
	} from "../../../utils/uniApi";
	import {
		AppModule
	} from '../../../store/modules/app'
	import uniLoadMore from '../../loadMore/uni-load-more.vue'

	@Component({
		//   @Component  是一个装修器   不可以在下面写语句
		name: "test",
		components:{
			 'uniLoadMore':uniLoadMore
		}
	})
	export default class extends Vue {
		@Prop({
			type: String, // 父组件传递给子组件的数据类型
			required: false, // 是否必填
			default: " ", // 默认值， 如果传入的是 Object，则要 default: ()=>({}) 参数为函数
		})
		msg!: string;

		// public isLoading = false; //是否加载中
		public keyword = ""; //搜索关键字
		public shopId: any = ""; //商户id
		public virtualD: any = {}; //虚拟码item
		public virtualCode: any = ""; //虚拟码
		public storeId: any = ""; //选择的网点id
		public showDatasList: any = []; //数据list
		public pageN: any = 1; //分页的页数
		public status = 'more'
		public contentText = {
			contentdown: '下拉或点击查看更多',
			contentrefresh: '加载中',
			contentnomore: '没有更多'
		}
		public continueTypes = true;

		created() {

		}

		onLoad(options: any) {
			if (options.data) {
				var dataDic = JSON.parse(options.data)
				this.shopId = dataDic.shop.id
				this.virtualD = dataDic.virtual
				this.virtualCode = dataDic.virtual.sn
				uni.setStorage({
					key: "websiteDic",
					data: dataDic,
					success: function() {},
				});
			} else {
				var dataDic = uni.getStorageSync("websiteDic");
				this.shopId = dataDic.shop.id
				this.virtualD = dataDic.virtual
				this.virtualCode = dataDic.virtual.sn
			}
		}

		onHide() {
			uni.hideLoading();
		}
		//下拉刷新
		onPullDownRefresh() {
			setTimeout(function() {
				uni.redirectTo({
					url: "../../../pages/item/virtualCode/virtualWebsite",
				});
				uni.stopPullDownRefresh();
			}, 1000);
		}
		//上拉加载更多
		onReachBottom() {
			if (!this.continueTypes) {
				return
			}
			this.pageN = this.pageN + 1;
			this.findShopBranch(this.keyword, this.pageN)
		}
		clickLoadMore() {
			this.onReachBottom()
		}


		mounted() {
			this.findShopBranch(this.keyword, this.pageN)
		}
		//接口查询网点信息
		findShopBranch(key: any, pageSize: any) {
			// this.isLoading = true
			uni.showLoading({
				title: "加载中",
			});
			let params = {
				userId: uni.getStorageSync("userId") == "" ? "" : parseInt(uni.getStorageSync("userId")),
				shopId: this.shopId, //商户ID
				branchName: key, //网点名称搜索
				pageNo: pageSize,
				pageSize: "20",
			};
			findShopBranch(params).then((res: any) => {
				// this.isLoading = false
				uni.hideLoading();
				if (res.data.code == 200) {
					console.log('输出网点信息：' + JSON.stringify(res.data))
					var boolee = res.data.hasNext == false && this.continueTypes == false;
					if (res.data.hasNext == true) {
						this.status = "more";
					} else {
						this.status = "noMore";
					}
					if (res.data.isFirst || !boolee) {
						if (res.data.hasNext == false) {
							this.continueTypes = false;
						}
						if (this.showDatasList.length > 0 && this.pageN == 1) { //搜索  删除已有数据
							this.showDatasList = [];
						}
						res.data.data.filter((item: any, index: any) => {
							item.show = false
							this.showDatasList.push(item);
						});
					}
					// if (this.showDatasList.length > 0 && this.pageN == 1) { //搜索时清除已有数据  如果有分页 需在考虑
					// 	this.showDatasList = [];
					// }
					// res.data.data.filter((item: any, index: any) => {
					// 	item.show = false
					// 	this.storeId = item.storeId
					// 	this.showDatasList.push(item);
					// });
				} else {
					uni.showToast({
						title: '数据加载失败',
						icon: 'none',
						duration: 2000
					});
				}
			});
		}

		//搜索框
		searchWD(value: any) {
			this.keyword = value
			this.pageN = 1
			this.findShopBranch(this.keyword, this.pageN)
		}
		//确认绑定
		sureBtnClick() {
			if (this.storeId == '') {
				uni.showToast({
					title: '请选择网点',
					icon: 'none',
					duration: 2000
				});
				return
			}
			uni.showLoading({
				title: "加载中",
			});
			let params = {
				storeId: this.storeId, //网点ID
			};
			bindStore(params, this.virtualCode).then((res: any) => {
				uni.hideLoading();
				if (res.data.statusCode == 200) {
					uni.showToast({
						title: '绑定成功',
						icon: 'none',
						duration: 1000
					});
					var that = this;
					setTimeout(function() {
						var dic = {
							virtual: that.virtualD,
							isEdit: false
						}
						uni.navigateTo({
							url: "./compile?virtual=" + encodeURIComponent(JSON.stringify(dic))
						});
					}, 1000);

				} else {
					uni.showToast({
						title: '绑定失败，请稍后再试',
						icon: 'none',
						duration: 2000
					});
				}
			});
		}
		//选中绑定
		selectClickM(data: any, index: any) {
			this.showDatasList.filter((item: any, index: any) => {
				if (item.id == data.id) {
					item.show = !item.show
					if (item.show) {
						this.storeId = item.storeId
					} else {
						this.storeId = ''
					}
				} else {
					item.show = false
				}
			});
		}
		//返回按钮事件
		goBackM() {
			uni.navigateBack({
				delta: 1
			});
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		height: 100%;
		background-color: #F3F5F7;
	}

	.searchPP {
		background-color: white;
		padding: 0.5rem;

		display: flex;
		align-items: center;
		border-bottom: 1px solid #e8e8e8;
	}

	.searchP {
		background-color: white;
		display: flex;
		width: 100%;
		justify-content: space-between;
	}

	.prolifyP {
		display: flex;
		padding: 0.8rem 1rem;
		justify-content: space-between;
		align-items: center;
	}

	/* 加上标签 或者加上>   */
	.agentprolify {
		display: flex;
		align-items: center;
		padding: 0.8rem 1rem;
	}

	.agentprolify :first-child {
		font-size: 0.72rem;
		font-family: "PingFang SC";
		font-weight: 300;
		color: #666666;
	}

	.agentprolify> :nth-child(1) {}

	.agentprolify> :nth-child(2) {
		color: red;
	}

	.cargoBtn {
		background: #02af74;
		border-radius: 0.2rem;
		padding: 0.2rem;
		color: white;
	}

	.footP {
		position: absolute;
		bottom: 0;
		background-color: #02af74;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
</style>
